<template>
    <!-- <div :class="{ 'dialog': !flag, 'dialog_active': flag }" @touchmove.prevent.stop @wheel.prevent.stop
        @click="flag = false"> -->
    <el-dialog v-model="flag" title="报名汇总" width="550" destroy-on-close center>
        <div class="dialogBox">
            <!-- <div style="height: 100px;"></div> -->
            <div class="staticBox scrollable-content" @click.stop>
                <!-- <div style="height: 20px;"></div> -->
                <div class="staticBox_top flex">
                    <div class="totalBox">
                        <p class="totalBox_pTotal pNum">{{ statisticsData.NumberOfPeople }}</p>
                        <div class="totalBox_person flex">
                            <img src="../../assets/reviveCollect_icon1.png" alt="">
                            <p>报名总数(人)</p>
                        </div>
                    </div>
                    <div class="shu_line"></div>
                    <div class="totalBox">
                        <p class="totalBox_pTotal pNum">{{ statisticsData.ActualNumberOfAdmissions }}</p>
                        <div class="totalBox_person flex">
                            <img src="../../assets/reviveCollect_icon2.png" alt="">
                            <p>实录人数(人)</p>
                        </div>
                    </div>
                    <div class="shu_line"></div>
                    <div class="totalBox">
                        <p class="totalBox_pTotal pNum">{{ statisticsData.TotalPayableAmount }}</p>
                        <div class="totalBox_person flex">
                            <img src="../../assets/reviveCollect_icon3.png" alt="">
                            <p>收费总额(元)</p>
                        </div>
                    </div>
                </div>

                <div class="typeCard">
                    <div class="typeCard_type flex">
                        <div class="type_line"></div>
                        <p>物化生</p>
                    </div>
                    <div class="typeCard_total flex">
                        <div>
                            <p class="p_Total pNum">{{ statisticsData.PayAndCourseCountWHS }}</p>
                            <p class="p_personal">缴费人数（人）</p>
                        </div>
                        <div>
                            <!-- <p class="p_Total pNum">0</p> -->
                            <p class="p_Total pNum">{{ statisticsData.payRefundCountWHS }}</p>
                            <p class="p_personal">退费人数（人）</p>
                        </div>
                        <div>
                            <!-- <p class="p_Total pNum">0</p> -->
                            <p class="p_Total pNum">{{ statisticsData.payCountWHS }}</p>
                            <p class="p_personal">实录人数（人）</p>
                        </div>
                    </div>
                    <div class="typeBox">
                        <div class="typeCard_title flex">
                            <img src="../../assets/reviveCollect_icon4.png" alt="">
                            <p>缴费情况</p>
                        </div>
                        <div class="typeBox_main flex">
                            <div>
                                <p class="amount pNum">{{ statisticsData.TotalPayableAmountWHS }}(元)</p>
                                <p class="amountTip">缴费金额</p>
                            </div>
                            <div>
                                <!-- <p class="amount pNum">0(元)</p> -->
                                <p class="amount pNum">{{ statisticsData.totalRefundAmountWHS }}(元)</p>
                                <p class="amountTip">退费金额</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="typeCard typeCard1">
                    <div class="typeCard_type flex">
                        <div class="type_line"></div>
                        <p>物化地</p>
                    </div>
                    <div class="typeCard_total flex">
                        <div>
                            <p class="p_Total pNum">{{ statisticsData.PayAndCourseCountWHD }}</p>
                            <p class="p_personal">缴费人数（人）</p>
                        </div>
                        <div>
                            <!-- <p class="p_Total pNum">0</p> -->
                            <p class="p_Total pNum">{{ statisticsData.payRefundCountWHD }}</p>
                            <p class="p_personal">退费人数（人）</p>
                        </div>
                        <div>
                            <!-- <p class="p_Total pNum">0</p> -->
                            <p class="p_Total pNum">{{ statisticsData.payCountWHD }}</p>
                            <p class="p_personal">实录人数（人）</p>
                        </div>
                    </div>
                    <div class="typeBox typeBox1">
                        <div class="typeCard_title flex">
                            <img src="../../assets/reviveCollect_icon4.png" alt="">
                            <p>缴费情况</p>
                        </div>
                        <div class="typeBox_main flex">
                            <div>
                                <p class="amount amount1 pNum">{{ statisticsData.TotalPayableAmountWHD }}(元)</p>
                                <p class="amountTip amountTip1">缴费金额</p>
                            </div>
                            <div>
                                <!-- <p class="amount amount1 pNum">0(元)</p> -->
                                <p class="amount amount1 pNum">{{ statisticsData.totalRefundAmountWHD }}(元)</p>
                                <p class="amountTip amountTip1">退费金额</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="typeCard">
                    <div class="typeCard_type flex">
                        <div class="type_line"></div>
                        <p>物化政</p>
                    </div>
                    <div class="typeCard_total flex">
                        <div>
                            <p class="p_Total pNum">{{ statisticsData.PayAndCourseCountWHZ }}</p>
                            <p class="p_personal">缴费人数（人）</p>
                        </div>
                        <div>
                            <!-- <p class="p_Total pNum">0</p> -->
                            <p class="p_Total pNum">{{ statisticsData.payRefundCountWHZ }}</p>
                            <p class="p_personal">退费人数（人）</p>
                        </div>
                        <div>
                            <!-- <p class="p_Total pNum">0</p> -->
                            <p class="p_Total pNum">{{ statisticsData.payCountWHZ }}</p>
                            <p class="p_personal">实录人数（人）</p>
                        </div>
                    </div>
                    <div class="typeBox">
                        <div class="typeCard_title flex">
                            <img src="../../assets/reviveCollect_icon4.png" alt="">
                            <p>缴费情况</p>
                        </div>
                        <div class="typeBox_main flex">
                            <div>
                                <p class="amount pNum">{{ statisticsData.TotalPayableAmountWHZ }}(元)</p>
                                <p class="amountTip">缴费金额</p>
                            </div>
                            <div>
                                <!-- <p class="amount pNum">0(元)</p> -->
                                <p class="amount pNum">{{ statisticsData.totalRefundAmountWHZ }}(元)</p>
                                <p class="amountTip">退费金额</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div style="height: 75px;"></div>
                <button class="downLoad" @click="downLoad">下载</button> -->
            </div>
            <!-- <div style="height: 100px;"></div> -->
        </div>
    </el-dialog>
    <!-- </div> -->
</template>

<script>
import { httpService } from "@/utils/httpService";
import { formatTime1 } from "@/utils/dateFormat";

export default {

    data() {
        return {
            flag: false,
            statisticsData: {},
        };
    },
    components: {

    },

    mounted() {
        // const box = document.querySelector(".dialogBox")
        // console.log(box.style.height);
        this.getDetail()
    },
    methods: {
        close() {
            this.flag = false
        },
        getDetail() {
            httpService(
                "/javaApi/reviewStudentForm/statistics", {}, "get"
            ).then((data) => {
                this.statisticsData = data
            });
        },

    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
    align-items: center;
}

.dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
    opacity: 0;
    transition: all 0.3s ease;
}

.dialog_active {
    /* width: 100vw; */
    min-height: 100vh;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    transition: all 0.3s ease;
}

.dialogBox {}

.staticBox {
    width: 500px;
    padding: 10px;
    background-color: #fff;
}

.staticBox_top {
    justify-content: space-around;
    height: 80px;
    background: url(../../assets/reviveCollect_bg2.png) no-repeat;
    background-size: 100% 100%;
}

.totalBox {
    text-align: center;
    color: #8B9CA0;
    font-size: 12px;
    width: calc((100% - 3px) / 3);
}

.totalBox img {
    width: 20px;
}

.shu_line {
    width: 1px !important;
    height: 80%;
    background-color: rgba(255, 255, 255, 0.6);
}

.totalBox_pTotal {
    font-size: 24px;
    color: #000;
    height: 35px;
    line-height: 35px;
}

.totalBox_person {
    justify-content: center;
}

.totalBox_person img {
    width: 20px;
    margin-right: 5px;
}

.typeCard {
    background: linear-gradient(to bottom, #F2F9FF 10%, #FFF 20%);
    margin-top: 15px;
    border-radius: 8px;
    padding-bottom: 15px;
}

.typeCard1 {
    background: linear-gradient(to bottom, #FFF1F1 10%, #FFF 30%);
}

.typeCard_type {
    color: #000;
    font-size: 16px;
    font-weight: bold;
    padding: 20px 0 0 15px;
}

.type_line {
    height: 14px;
    width: 3px;
    background-color: #3F99E8;
    border-radius: 2px;
    margin-right: 7px;
}

.typeCard_total {
    justify-content: space-evenly;
    text-align: center;
    margin-top: 15px;
}

.p_Total {
    font-size: 22px;
    color: #000;
    height: 30px;
    line-height: 30px;
}

.p_personal {
    color: #666;
    font-size: 12px;
}

.typeBox {
    background: linear-gradient(to right, #F2F9FF 30%, #FFF 80%);
    margin: 15px 15px 0;
    padding: 10px;
    border-radius: 8px;
}

.typeBox1 {
    background: linear-gradient(to right, #FFF1F1 20%, #FFF);
}

.typeCard_title {
    color: #000;
    font-size: 16px;
    font-weight: bold;
}

.typeCard_title img {
    width: 23px;
    margin-right: 8px;
}

.typeBox_main {
    justify-content: space-around;
    text-align: center;
    padding: 25px 0 5px 0;
}

.amount {
    font-size: 17px;
    color: #000;
}

.amount1 {
    color: #671303 !important;
}

.amountTip {
    color: #000000;
    font-size: 14px;
    margin-top: 10px;
}

.amountTip1 {
    color: #7A3C38 !important;
}

.downLoad {
    width: calc(100% - 30px);
    height: 45px;
    background-color: #1D9BFB;
    color: #fff;
    font-size: 17px;
    border: none;
    border-radius: 8px;
    position: fixed;
    left: 15px;
    bottom: 30px;
}


.scrollable-content {
    overflow-y: auto;
    max-height: 100%;
}
</style>